<template>
  <div class="major-overview">
    <div class="container">
      <div class="header" @click="gotoFavorites">
        <img class="icon" :src="yellowStar" alt="" />
        <div class="title">专业收藏夹</div>
        <div class="right-arrow">
          <span>更多</span>
          <img class="icon" :src="nextArrow" alt="" />
        </div>
      </div>
      <van-swipe
        v-if="props.majorList.length > 0"
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item
          v-for="(item, index) in props.majorList"
          :key="index"
          @click="gotoMajorDetail(item)"
        >
          <div class="major-item">
            <div class="top">
              <div class="left">
                <div class="tag-name">{{ item.tagName }}</div>
                <div class="major-info">
                  {{ item.cateType == 30 ? '本科' : '专科' }} ·
                  {{ item.topName }} · {{ item.parentName }}
                </div>
              </div>
              <div class="right">
                <img :src="Book" alt="" />
              </div>
            </div>
            <div class="bottom">
              <div class="bottom-info">
                <div class="title">{{ item.tagCode }}</div>
                <div class="info">
                  <img :src="zydm" alt="" />
                  <span>专业代码</span>
                </div>
              </div>
              <div class="bottom-info">
                <div class="title">{{ item.tagTimeDesc }}</div>
                <div class="info">
                  <img :src="xynx" alt="" />
                  <span>修业年限</span>
                </div>
              </div>
              <div class="bottom-info">
                <div class="title">
                  {{ item.tagDesc }}
                </div>
                <div class="info">
                  <img :src="syxw" alt="" />
                  <span>授予学位</span>
                </div>
              </div>
              <div class="bottom-info">
                <div class="title">{{ item.averageSalary || '' }}</div>
                <div class="info">
                  <img :src="pjxc" alt="" />
                  <span>平均薪酬</span>
                </div>
              </div>
            </div>
          </div>
        </van-swipe-item>
        <template #indicator="{}">
          <div class="custom-indicator"></div>
        </template>
      </van-swipe>
      <div v-else class="empty">
        <Empty text="暂无收藏" :img="noData" :size="160" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch, ref } from 'vue';
import { useRouter } from 'vue-router';
import Book from '@/assets/images/book.png';
import zydm from '@/assets/images/zydm.png';
import xynx from '@/assets/images/xynx.png';
import syxw from '@/assets/images/syxw.png';
import pjxc from '@/assets/images/pjxc.png';
import yellowStar from '@/assets/images/yellowStar.png';
import nextArrow from '@/assets/images/nextArrow.png';
import noData from '@/assets/images/noData.png';
import Empty from '@/components/Empty.vue';

const router = useRouter();

const props = defineProps({
  majorList: {
    type: Array,
    default: () => [],
  },
});

const gotoFavorites = () => {
  router.push({
    name: 'MajorFavorites',
  });
};

const gotoMajorDetail = (item) => {
  router.push({
    name: 'MajorDetail',
    query: {
      positionTagId: item.positionTagId,
      tagName: item.tagName,
      cateType: item.cateType,
    },
  });
};

// 监听 majorList 的变化
watch(
  () => props.majorList,
  (newList, oldList) => {
    // 移除手动调用 autoplay 方法的代码
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.major-overview {
  width: 800px;
  border-radius: 42px;
  border: 2px solid transparent;
  background-image: linear-gradient(#f7fbfe, #f7fbfe),
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(206, 231, 245, 1));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(24px);
  position: relative;
  box-sizing: border-box;
  border-radius: 24px;
  overflow: hidden;

  .container {
    height: calc(100% - 80px);
    .header {
      display: flex;
      gap: 18px;
      align-items: center;
      padding: 32px 40px 0 40px;
      .icon {
        width: 38px;
        height: 39px;
      }
      .right-arrow {
        margin-left: auto;
        display: flex;
        align-items: center;
        font-size: 24px;
        color: #aaaaaa;
        .icon {
          margin-left: 6px;
          width: 24px;
          height: 24px;
        }
      }
      .title {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 30px;
        color: #df8001;
      }
    }
    .my-swipe {
      width: 100%;
      height: 100%;
      .van-swipe-item {
        padding: 0 40px 32px 40px;
        color: black;
        font-size: 20px;
        background-color: #f7fbfe;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;

        .major-item {
          width: 100%;
          height: 100%;
          .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 24px;

            .left {
              .tag-name {
                font-size: 34px;
                color: #333333;
                font-weight: bold;
              }
              .major-info {
                font-size: 26px;
                color: #666666;
                margin-top: 16px;
              }
            }
            .right {
              padding-top: 19px;
              img {
                width: 207px;
                height: 218px;
              }
            }
          }
          .bottom {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            .bottom-info {
              padding: 24px 10px 30px 30px;
              box-sizing: border-box;
              background: #ffffff;
              box-shadow: 0px 7px 19px 0px #d7e7ff;
              border-radius: 18px;
              overflow: hidden;
              .title {
                font-family: D-DIN-PRO, D-DIN-PRO;
                font-weight: bold;
                font-size: 28px;
                color: #333333;
                height: 38px;
                margin-bottom: 8px;
                padding-left: 6px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .info {
                display: flex;
                align-items: center;
                img {
                  width: 35px;
                  height: 31px;
                  margin-right: 11px;
                }
                span {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 22px;
                  color: #959da8;
                }
              }
            }
          }
        }
      }
    }
    .empty {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
